<template>
<div>
    <el-tabs type="border-card" v-model="active" class="m-b">
        <el-tab-pane :label="'代码变化统计'" :name="'代码变化统计'">
            <el-row :gutter="20" v-if="active=='代码变化统计'">
                <el-col :span="24">
                    <el-card class="box-card" body-style="padding-top: 10px; padding-bottom: 10px;" shadow="never">
                        <!-- <div slot="header" class="clearfix">
                            <span>代码变化统计</span>
                        </div> -->
                        <el-row>
                            <ve-histogram :data="chartData" :settings="chartSettings1" :data-zoom="dataZoom">
                                <div class="data-empty" v-if="!isDisplay">没有数据😂</div>
                            </ve-histogram>
                        </el-row>      
                    </el-card>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane :label="'评审缺陷密度趋势'" :name="'评审缺陷密度趋势'">
            <el-row :gutter="20" v-if="active=='评审缺陷密度趋势'">
                <el-col :span="24">
                    <el-card class="box-card" body-style="padding-top: 10px; padding-bottom: 10px;" shadow="never">
                        <el-row>
                            <ve-line :data="chartData" :settings="chartSettings2" :data-zoom="dataZoom">
                                <div class="data-empty" v-if="!isDisplay">没有数据😂</div>
                            </ve-line> 
                        </el-row>      
                    </el-card>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane :label="'Patch总数提交趋势'" :name="'Patch总数提交趋势'">
            <el-row :gutter="20" v-if="active=='Patch总数提交趋势'">
                <el-col :span="24">
                    <el-card class="box-card" body-style="padding-top: 10px; padding-bottom: 10px;" shadow="never">
                        <el-row>
                            <ve-line :data="chartData" :settings="chartSettings3" :data-zoom="dataZoom">
                                <div class="data-empty" v-if="!isDisplay">没有数据😂</div>
                            </ve-line> 
                        </el-row>      
                    </el-card>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane :label="'评审有效比率'" :name="'评审有效比率'">
            <el-row :gutter="20" v-if="active=='评审有效比率'">
                <el-col :span="24">
                    <el-card class="box-card" body-style="padding-top: 10px; padding-bottom: 10px;" shadow="never">
                        <el-row>
                            <ve-line :data="chartData" :settings="chartSettings4" :data-zoom="dataZoom">
                                <div class="data-empty" v-if="!isDisplay">没有数据😂</div>
                            </ve-line>  
                        </el-row>      
                    </el-card>
                </el-col>
            </el-row>
        </el-tab-pane>
    </el-tabs>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { getHeader } from '@/app.config';

export default {
    name: 'ChartGerrit',
    // props: {
    //     filters: Object
    // },
    computed: {
        ...mapState({
            filters: state => state.filters
        }),
        isDisplay() {
            if (this.chartData.rows.length != 0) {
                return true;
            } else {
                return false;
            }
        }
    },
    data() {
        return {
            active: '代码变化统计',
            chartSettings1: {
                metrics: ['lines_insert__sum', 'lines_delete__sum', 'inline_comments__sum'],
                dimension: ['update_time'],
                labelMap: {
                    lines_insert__sum: '代码新增(行)',
                    lines_delete__sum: '代码删除(行)',
                    inline_comments__sum: '代码评审注释(个)'
                }
            },
            chartSettings2: {
                metrics: ['defect_density'],
                dimension: ['update_time'],
                labelMap: {
                    defect_density: '评审缺陷密度(个/Kloc)'
                }
            },
            chartSettings3: {
                metrics: ['count_patch'],
                dimension: ['update_time'],
                labelMap: {
                    count_patch: 'Patch 总数(个)'
                }
            },
            chartSettings4: {
                metrics: ['effective_radio'],
                dimension: ['update_time'],
                // yAxisType: ['percent'],
                labelMap: {
                    effective_radio: '评审有效比率'
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    start: 50,
                    end: 100
                }
            ],
            chartData: {
                columns: ['updatetime', 'lines_insert__sum', 'lines_delete__sum', 'inline_comments__sum', 'count_patch', 'defect_density', 'effective_radio'],
                rows: []
            }
        }
    },
    watch: {
        filters: {
            handler: function() {
                this.getData();
            },
            deep: true,
        },
    },
    methods: {
        getCodeReviewDaily() { //project, time, branch, component, mode='chart'
            let source = `/api/qa/projcodedaily?projectId=${this.filters.projectId}&time=${this.filters.time}&mode=chart`
            // source = source+project+'&time='+time+'&branch='+branch+'&component='+component+'&mode='+mode;
            this.$axios.get(source, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.status == 200) {
                            if (response.data.code == 200) {
                                this.chartData.rows = response.data.qSet;
                            }
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getData() {
            // var branch = this.filters.select1;
            // var component = this.filters.select2;
            // var time = this.filters.dateTime;
            // if (null == time || "undefined" == typeof(time)) {
            //     time = ''
            // }
            this.getCodeReviewDaily();  //this.project_id,time,branch,component
        },
        
    },
    created: function() {
        // this.project_id = this.$route.params.pmsProjectId;
    },
    mounted: function() {
        this.getData();
    }
}
</script>
<style scoped>
    .data-empty {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .7);
    color: #888;
    font-size: 14px;
    }
    .m-b{
        margin-bottom: 15px;
    }
</style>